<template>
	<view class="order-page">
		<nav-bar title="订单" :showLeftIcon="false"></nav-bar>
		<you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem"></you-tabs>
		<you-scroll :loadingHeight="loadingHeight" :mainHeight="scrollHeight" :isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" @onRefresh="onRefresh" @loadMore="loadMore">
			<template>
				<view v-if="isLoading" class="common-loading">
					<image class="loading-img" :src="baseIconUrl + 'commonIcon/icon_loading.png'" />
					正在加载数据，请稍后......
				</view>
				<view class="common-no-data" v-else-if="!orderList || orderList.length === 0">
					<image class="no-data-img" :src="baseIconUrl + 'commonIcon/icon_no_data.png'" />
					<view class="text">暂无订单~</view>
				</view>
				<view v-else class="order-list">
					<order-list :orderList="orderList" @refund="refund"></order-list>
				</view>
			</template>
		</you-scroll>
	</view>
</template>

<script>
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	import OrderList from '../subPages/components/orderList'
	export default {
		name: 'Order',
		components: {
			OrderList
		},
		data() {
			return {
				baseIconUrl,
				baseImgUrl,
				tabActive: '0',
				tabsList: [{
						label: '全部',
						name: '0'
					},
					{
						label: '待发货',
						name: '1'
					},
					// {
					// 	label: '配送中',
					// 	name: '2'
					// },
					{
						label: '待收货',
						name: '2'
					},
					{
						label: '已完成',
						name: '4'
					},
					{
						label: '已退单',
						name: '5'
					}
				],
				loadingHeight: '',
				scrollHeight: '',
				isAllData: false,
				isRequestSuccess: false,
				isLoading: false,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				orderList: []
			}
		},
		onLoad(options) {
			this.scrollHeight = this.$store.getters.heightData.mainHeight - 48 + 'px'
			this.loadingHeight = this.$store.getters.heightData.mainHeight - 68 + 'px'
			if (options.orderStatus) {
				this.tabActive = options.orderStatus
			}
			this.getOrderList({
				orderStatus: this.tabActive
			})
		},
		onShow() {
			this.getOrderList({
				orderStatus: this.tabActive
			})
		},
		methods: {
			async refund(item) {
				console.log(item);
				const data = {
					id: item.outTradeNo || item.id
				}
				console.log(item)
				uni.showModal({
					content: '确定申请退款?',
					success: async (succ) => {
						const res = await this.$PUT('/fx/order/chargebackOrder', data)
						if (res.code == 200) {
							console.log(res.data)
							uni.showToast({
								icon: 'success',
								title: res.message,
								duration: 2000
							})
							setTimeout(() => {
								this.tabActive = '5'
								this.getOrderList({
									orderStatus: 5
								})
							}, 2000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message,
								duration: 2000
							})
						}
					}
				})
			},
			clickTabItem(value) {
				const data = {
					orderStatus: value,
				}
				this.tabActive = value
				this.pageNum = 1
				this.orderList = []
				this.getOrderList(data)
			},
			async getOrderList(data) {
				const res = await this.$GET('/fx/order/list?userRole=2', data)
				if (res.code == 200) {
					console.log('订单-->', res)
					this.orderList = res.rows
				}
				this.total = this.orderList.length
				this.isRequestSuccess = true
				this.isLoading = false
			},
			// 下拉刷新
			onRefresh() {
				this.pageNum = 1
				this.orderList = []
				this.isAllData = false
				this.isRequestSuccess = false
				this.getOrderList({
					orderStatus: this.tabActive
				})
			},
			// 上拉加载
			loadMore() {
				if (this.orderList.length < this.total) {
					this.pageNum++
					this.isAllData = false
					this.isRequestSuccess = false
					this.getOrderList({
						orderStatus: this.tabActive
					})
				} else {
					this.isAllData = true
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.order-list {
		padding: 20rpx 28rpx 10rpx;
	}
</style>